<template>
  <div class="hello">
    <div
      style="
        margin-top: 28px;
        margin-left: 18px;
        margin-right: 18px;
        font-size: 14px;
      "
    >
      问卷标题问卷标题问卷标题问卷标题问卷标题问卷标题问卷标题问卷标题
    </div>
    <div
      style="
        margin-top: 8px;
        margin-left: 18px;
        color: rgba(174, 174, 174, 100);
        font-size: 10px;
      "
    >
      发布时间：2021.10.11 15:00
    </div>
    <div
      style="
        margin-top: 8px;
        margin-left: 18px;
        font-size: 14px;
        font-weight: bold;
      "
    >
      1、职业
    </div>
    <div
      style="
        width: 330px;
        height: 200px;
        border: 2px solid #f4f4f4;
        margin-left: 20px;
        border-radius: 4px;
        margin-top: 10px;
      "
    >
      <section class="selectPay">
        <ul class="payBox active" id="payBox">
          <li
            class="payWay"
            v-for="(item, index) in occupation"
            :key="index"
            @click="addImg(index, item)"
          >
            <span
              class="chooseIcon"
              :class="occupationIndex == index ? 'active' : ''"
            ></span>
            <span style="margin-left: 20px">{{ item }}</span>
          </li>
        </ul>
      </section>
    </div>
       <div
      style="
        margin-top: 8px;
        margin-left: 18px;
        font-size: 14px;
        font-weight: bold;
      "
    >
      2、你喜欢玩那种模式（多选）
    </div>
    <div
      style="
        width: 330px;
        height: 100px;
        border: 2px solid #f4f4f4;
        margin-left: 20px;
        border-radius: 4px;
        margin-top: 10px;
      "
    >
<div class="box">
      <ul>
        <li v-for="item,index of patterns" :class="{checked:item.check}" @click="checkChange(index,item.pattern)">
          <span class="checkbox"></span>
         <span style="margin-left: 20px">{{item.pattern}}</span> 
        </li>
      </ul>
    </div>
    </div>
          <div
      style="
        margin-top: 8px;
        margin-left: 18px;
        font-size: 14px;
        font-weight: bold;
      "
    >
      3、喜欢什么类型舞蹈（多选）
    </div>
    <div
      style="
        width: 330px;
        height: 150px;
        border: 2px solid #f4f4f4;
        margin-left: 20px;
        border-radius: 4px;
        margin-top: 10px;
      "
    >
<div class="boxone">
      <ul>
        <li v-for="item,index of danceType" :class="{checked:item.check}" @click="danceChange(index,item.type)">
          <span class="checkbox"></span>
         <span style="margin-left: 10px">{{item.type}}</span> 
        </li>
      </ul>
    </div>
    </div>
          <div
      style="
        margin-top: 8px;
        margin-left: 18px;
        font-size: 14px;
        font-weight: bold;
      "
    >
      4、谢谢你的支持，其他问题。建议欢迎留言（选填）
    </div>
    <div><textarea style="width:330px;margin-left:18px;margin-top:10px; padding:20px;  box-sizing: border-box;" name="" id="" cols="30" rows="10"></textarea></div>
    <div class="submit_btn">提交</div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
         patterns: [{ pattern: "花式", check: false},{pattern: "竞速",check: false},],
          danceType: [{ type: "韩舞", check: false},{type: "街舞",check: false},{ type: "宅舞（二次元）", check: false},{type: "中国风",check: false},{ type: "传统舞蹈", check: false},{type: "其他",check: false},],
      occupation: ["学生", "舞蹈音乐", "其他工作", "自由职业"],
      occupationIndex: 0, //默认选中第一个

      isBlanced: true, //用于取消选中
    };
  },
  methods: {
    addImg: function (index, item) {
      //选择支付方式
      let _this = this;
      _this.isBlanced = !_this.isBlanced;
      if (_this.occupationIndex == index) {
        if (!_this.isBlanced) {
          _this.occupationIndex = -1;
        } else {
          _this.occupationIndex = index;
        }
      } else {
        _this.occupationIndex = index;
      }
    },
checkChange(index, name) {
          let that = this;
          that.patterns[index].check = !that.patterns[index].check;
          if (that.patterns[index].check == true) {
            that.choose.push(that.patterns[index].pattern);
          } else {
            let indexes = that.choose.indexOf(name);
            that.choose.splice(indexes, 1);
          }
          console.log(that.choose);
        },
        danceChange(index, name) {
          let that = this;
          that.danceType[index].check = !that.danceType[index].check;
          if (that.danceType[index].check == true) {
            that.choose.push(that.danceType[index].type);
          } else {
            let indexes = that.choose.indexOf(name);
            that.choose.splice(indexes, 1);
          }
          console.log(that.choose);
        }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.submit_btn{
width: 80px;
height: 30px;
line-height: 30px;
border-radius: 4px;
background-color: rgba(243, 149, 62, 100);
color: rgba(241, 241, 240, 100);
font-size: 14px;
  text-align: center;
  margin-left: 152px;
  margin-top: 29px;
  margin-bottom: 50px;

}
.payWay {
  height: 50px;
  display: flex;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
  padding: 0 0.45rem;
  align-items: center;
}

.chooseIcon {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url(../assets/noselect.png) no-repeat;
  background-size: 100%;
}

.chooseIcon.active {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url(../assets/select.png) no-repeat;
  background-size: 100%;
}
.box {
      width: 100%;
      height: 30px;
      line-height: 30px;

    }
 
  .boxone li {
    width: 165px;
     height: 50px;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
  padding: 0 0.45rem;
  align-items: center;
  float: left;
    }
 
    .boxone li .checkbox {
      width: 20px;
      height: 20px;
      content: "";
    
      display: inline-block;
      /*一定要将div设置为inline-block*/
      vertical-align: middle;
      /*设置该元素在父元素中的位置*/
      background: url('../assets/noselect.png') no-repeat;
      background-size: 100% 100%;
    }
 
    .boxone li.checked .checkbox {
      background: url('../assets/select.png') no-repeat;
      background-size: 100% 100%;
    }
    .box li {
     height: 50px;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
  padding: 0 0.45rem;
  align-items: center;
    }
 
    .box li .checkbox {
      width: 20px;
      height: 20px;
      content: "";
    
      display: inline-block;
      /*一定要将div设置为inline-block*/
      vertical-align: middle;
      /*设置该元素在父元素中的位置*/
      background: url('../assets/noselect.png') no-repeat;
      background-size: 100% 100%;
    }
 
    .box li.checked .checkbox {
      background: url('../assets/select.png') no-repeat;
      background-size: 100% 100%;
    }
</style>
